<template>
  <z-modal
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="12" >
            <a-form-model-item label="车牌" prop = "plate" >
              <a-input v-model.trim="form.plate" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="生效时间" prop = "enableTime" >
              <a-date-picker v-model="form.enableTime" placeholder="请选择生效时间" style="width: 100%"
                             :disabled="disableSubmit"
                             format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" :show-time="{ format: 'HH:mm:ss' }"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="失效时间" prop = "overdueTime" >
              <a-date-picker v-model="form.overdueTime" placeholder="请选择失效时间" style="width: 100%"
                             :disabled="disableSubmit"
                             format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" :show-time="{ format: 'HH:mm:ss' }"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="备注" prop = "context" >
              <a-input v-model.trim="form.context" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mapGetters } from 'vuex'
export default {
  name: 'PlateModal',
  mixins: [ModalFormMixin],
  data() {
    return {
      validatorRules: {
        plate: [{ required: true, message: '请输入车牌' }],
        enableTime: [{ required: true, message: '请输入生效时间' }],
        overdueTime: [{ required: true, message: '请输入失效时间' }],
        context: [{ max: 5, message: '长度最多5个字符' }]
      },
      url: {
        add: '/stop/v1/add',
        edit: '/stop/v1/edit'
      },
      headers: {}
    }
  },
  methods: {
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.headers[ACCESS_TOKEN] = this.token
  }

}
</script>

<style lang="less">
</style>
